<template>
  <div class="product-details">
    <div class="product-content">
      <div class="product-image">
        <div class="image-slider">
          <div v-for="(image, index) in goodsImg" :key="index" class="slide" :class="{ 'active': activeIndex === index }">
            <img :src="image.imgLink" :alt="'image-imgLink-' + index" @click="selectImage(index)" class="slider-img">
          </div>
        </div>
        <img :src="goodsImg[activeIndex].imgLink" class="main-product-img">
      </div>
      <div v-for="result in goods" :key="result.id" class="product-info">
        <h2>{{ result.name }} </h2><br>
        <p class="description" style="color:red;font-weight: bold">{{ result.detail }}</p><br>
        <p class="unit">单位: {{ result.unit }}</p>
        <p class="price">价格: ${{ result.price }}</p>
        <p style="color: red">当前库存: {{ result.stockUp }}</p>
        购买数量：<el-input-number v-model="num" :min="1" :max="result.stockUp" label="购买数量"></el-input-number>
        <el-row v-if="user"><br>
          <el-button type="success" @click="addToCart()">加入购物车</el-button>
        </el-row>

        <el-row v-else><br>
          <el-button type="success" @click="addToCart2()">加入购物车</el-button>
        </el-row>
      </div>
    </div>
    <div class="product-comments">
      <h3>商品评价</h3>
      <div v-if="comments.length === 0" class="no-comments">
        <p>本商品暂无评论!</p>
      </div>
      <div v-else>
        <div class="comment" v-for="(comment, index) in comments" :key="index">
          <p class="comment-text">评论内容：{{ comment.goodsComment.content }}</p>
          <p class="comment-author">评论用户:：{{ comment.sysUsers.nickName}}</p>
          <p class="comment-author">评论时间： {{ comment.goodsComment.createTime}}</p><hr>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //用户ID
      sysUsersId: '',
      //传过来的商品id
      id:'',
      //购买数量
      num:'1',
      //商品信息
      goods: {},
      //商品图片
      goodsImg:[],
      //商品相关评论
      comments: [],
      product: {
        name: '苹果',
        description: '3斤一袋，精品洛川红富士苹果',
        images: [
          '../assets/pingguo1.jpg',
          '../assets/pingguo1.jpg',
          '../assets/pingguo1.jpg'
        ],
        unit:'盒',
        price: 9.99,
      },
      activeIndex: 0,
      user: JSON.parse(localStorage.getItem("user")),
    }
  },
  methods: {
    selectImage(index) {
      this.activeIndex = index;
    },
    //查询商品信息
    async searchGoods() {
      const {data: res}= await this.$http.post(`/goodsInfo/selGoodsById/${this.id}`)
      this.goods = res
      console.log(res)
    },
    //查询商品相关的评论
    async searchComments() {
      const {data: res}= await this.$http.post(`/goodsComment/selGoodsById/${this.id}`)
      console.log(this.id)
      this.comments = res
    },
    //查询商品图片
    async searchGoodsPicture() {
      const {data: res}= await this.$http.post(`/goodsImg/queryGoodsImgByGId2/${this.id}`)
      this.goodsImg = res
      console.log("商品图片",res)
    },
    //加入购物车
    async addToCart() {
      this.sysUsersId = this.$store.state.user.sysUsersId; //获取用户ID
      let goodsId = this.id; //获取商品ID
      let goodsCount = this.num; //获取商品数量
      const { data: res } = await this.$http.post(`/cartInfo/addToCart/${this.sysUsersId}/${goodsId}/${goodsCount}`);
      this.$message.success(res)
      /*console.log("商品ID：",goodsId)
      console.log("商品数量：",goodsCount)*/
      this.$router.push('/ShoppingTrolley')
    },
    //加入购物车,但没有登录时
    async addToCart2() {
      this.$message.error('您还没有登录，请登录后进行！')
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.searchGoods();
    this.searchComments();
    this.searchGoodsPicture();
  }
}
</script>

<style scoped>
.product-details {
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  background-color: #fff;
}

.product-content {
  display: flex;
}

.product-image {
  flex: 1;
  text-align: center;
  position: relative;
  margin-right: 20px;
}

.image-slider {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}

.slide {
  width: 40px;
  height: 40px;
  margin: 0 5px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  transition: border 0.3s ease;
}

.slider-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-product-img {
  max-width: 100%;
  width: 850px;
  height: 450px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.product-info {
  flex: 1.12;
  position: relative;
  top: 30px;
}

.price {
  font-size: 20px;
  font-weight: bold;
}

.unit {
  font-size: 20px;
  font-weight: bold;
}
</style>